<template>
  <view>
    <view :style="textStyle" class="text-content">
      <text @click="eventClick">{{ displayText }}</text>
	  <text v-if="isTruncated" @click="toggleText" class="toggle-text">
	    {{ isExpanded ? '#收起' : '#全文' }}
	  </text>
    </view>
    
  </view>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isExpanded: false
    };
  },
  computed: {
    displayText() {
      if (this.isExpanded) {
        return this.text;
      }
      return this.text.length > maxLength ? this.text.slice(0, maxLength) + '...' : this.text;
    },
    isTruncated() {
      return this.text.length > maxLength;
    },
    textStyle() {
      return {
        overflow: this.isExpanded ? 'visible' : 'hidden',
      };
    }
  },
  methods: {
    toggleText() {
      this.isExpanded = !this.isExpanded;
    },
	eventClick(){
		this.$emit('readMsg');
	},
  }
};

const maxLength = 56; // 设置最大字符数
</script>

<style scoped>
.text-content {
  max-height: none;
}

.toggle-text {
  color: #0191FF; /* 链接颜色 */
  cursor: pointer;
}
</style>
